@page "/media"
@inherits BasePage
@using MduiBlazor.Shared.Pages.Examples.Medias

<PageTitle>媒体</PageTitle>
<div class="mdui-m-y-5">
    <MduiText Typo="@Typo.display1" TextColor="@Colors.Theme.Primary">媒体</MduiText>
</div>

<PageContent>
    <PageContentItem Title="图片" OnClick="@(_=>ScrollToElementById("img"))">
        <PageContentItem Title="响应式" OnClick="@(_=>ScrollToElementById("fluidimg"))" />
        <PageContentItem Title="圆角图片" OnClick="@(_=>ScrollToElementById("roundedimg"))" />
        <PageContentItem Title="圆形图片" OnClick="@(_=>ScrollToElementById("circleimg"))" />
    </PageContentItem>
    <PageContentItem Title="视频" OnClick="@(_=>ScrollToElementById("video"))">
        <PageContentItem Title="响应式嵌入式视频" OnClick="@(_=>ScrollToElementById("iframevideo"))" />
        <PageContentItem Title="响应式HTML5视频" OnClick="@(_=>ScrollToElementById("h5video"))" />
    </PageContentItem>
    <PageContentItem Title="组件参数" OnClick="@(_=>ScrollToElementById("attr"))" />
</PageContent>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="img">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">图片</MduiText>
    </h2>

    <MduiText id="fluidimg" Typo="@Typo.subheading">响应式</MduiText>
    <p class="mdui-typo">在<code>MduiImage</code>组件设置<code>Fluid</code>参数为<code>true</code>可以使图片自适应它的父元素的宽度。</p>
    <ExampleSection Component="@typeof(FluidImage)" />

    <MduiText id="roundedimg" Typo="@Typo.subheading">圆角图片</MduiText>
    <p class="mdui-typo">在<code>MduiImage</code>组件设置<code>Rounded</code>参数为<code>true</code>可以使图片具有圆角。</p>
    <ExampleSection Component="@typeof(RoundedImage)" />

    <MduiText id="circleimg" Typo="@Typo.subheading">圆形图片</MduiText>
    <p class="mdui-typo">在<code>MduiImage</code>组件设置<code>Circle</code>参数为<code>true</code>可以使图片变成圆形。</p>
    <ExampleSection Component="@typeof(CircleImage)" />
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="video">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">视频</MduiText>
    </h2>

    <MduiText id="iframevideo" Typo="@Typo.subheading">响应式嵌入式视频</MduiText>
    <p class="mdui-typo">在嵌入式视频上嵌套<code>MduiVideoContainer</code>组件可以使视频自适应父元素的宽度。</p>
    <ExampleSection Component="@typeof(IFrameVideo)" />

    <MduiText id="h5video" Typo="@Typo.subheading">响应式HTML5视频</MduiText>
    <p class="mdui-typo">在<code>video</code>标签上嵌套<code>MduiVideoContainer</code>组件可以使视频自适应父元素的宽度。</p>
    <ExampleSection Component="@typeof(Html5Video)" />
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="attr">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">组件参数</MduiText>
    </h2>

    <MduiTableContainer UseMduiTypo Class="mdui-m-y-1">
         <MduiSimpleTable>
             <thead>
                 <th>组件</th>
                 <th>参数名称</th>
                 <th>类型/返回类型</th>
                 <th>说明</th>
             </thead>
             <tbody>
                 <tr>
                    <td rowspan="3">
                        <code>MduiImage</code>
                    </td>
                     <td>
                         <code>Fluid</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否使图片自适应它的父元素的宽度。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Rounded</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否使图片具有圆角。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Circle</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否使图片变成圆形。</td>
                 </tr>
                 <tr>
                    <td>
                        <code>MduiVideoContainer</code>
                    </td>
                     <td></td>
                     <td></td>
                     <td>该组件使其包含的视频自适应其宽度。</td>
                 </tr>
             </tbody>
         </MduiSimpleTable>
     </MduiTableContainer>
 </div>